<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1">
    <title>确认订单</title>
    <script src="<?php echo base_url('static/plugins/jquery-1.10.2.min.js')?>" type="text/javascript"></script>
    <style type="text/css">
		* {
		    margin: 0;
		    padding: 0;
		    padding-bottom: 0px;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  			-webkit-tap-highlight-color: transparent;
  			
  			    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/     
			    -webkit-user-select:none; /*webkit浏览器*/     
			    -khtml-user-select:none; /*早期浏览器*/     
			    -moz-user-select:none;/*火狐*/     
			    -ms-user-select:none; /*IE10*/     
			    user-select:none;  
		}
		*:hover,*:active{
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  			-webkit-tap-highlight-color: transparent;
		}
		.item-info{margin-bottom:0.75em;}
		.item-info:last-child{margin:0;}
		input {        
		     -webkit-user-select:auto; /*webkit浏览器*/       
		}  
    	body{
    		background-color: #f5f5f5;
    		font-szie:14px;
    		line-height: 1;
/*     		padding-bottom:0.5em; */
    		width:99%;
    		font-family: -apple-system-font, "Helvetica Neue", sans-serif;
    		line-height: 1;
    	}
    	
    	.weui-form-preview {
		    position: relative;
		    background-color: #FFFFFF;
		}
		
		.weui-form-preview__bd {
		    padding: 10px 15px;
		    font-size: .9em;
		    text-align: right;
		    color: #999999;
		    line-height: 2;
		}
    	
   		.header{
			border-bottom: 1px solid rgba(230,230,230,.5);
			width:100%;
			position: relative;
			height:2.1rem;
   		} 	
   		.store-icon{
   			width:1.2em;	
   			text-align:left;
   			/*height:1.4em;*/
   			position: absolute;
   			/*top:-1px;*/
   			left:0;
   		}
   		
   		.store-icon img{
   			width:100%;
   			/*height:100%;*/
   			vertical-align: middle;
   		}
   		.store-name{
   			width:100%;	
   			text-align:left;
   			line-height:2.1em;
   			position: absolute;
   			/*top:-0.3em;*/
   			left:0.25rem;
   			padding-left:1.3em;
   			-moz-box-sizing: border-box;  /*Firefox3.5+*/ 
 			-webkit-box-sizing: border-box; /*Safari3.2+*/ 
 			-o-box-sizing: border-box; /*Opera9.6*/
 			-ms-box-sizing: border-box; /*IE8*/ 
 			box-sizing: border-box;
 			padding-right:7.4em;
 			padding-top:0;
 			font-size:1.1em;
 			color:rgb(51,51,51);
 			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
   		}
   		
   		.action-btn{
   			width:9em;	
   			text-align:right;
   			height:1.3em;
   			position: absolute;
   			top:0;
   			right:0;
   			padding-top:0;
   			padding-right:1em;
   		}
   		
   	    .form-select img{
   			width:100%;
   		}
   		
   		.item{
   		    width: 100%;
		    position: relative;
		    height: 6em;
		    padding: 1rem 0 0.2rem 0;
		    overflow: hidden;
		    font-family: "PingFang";
   		}
   		.product-pic{
			width:5em;	
   			height:5em;
   			position: absolute;
   			top:1em;
   			left:0;
   			/*padding:1em 0;*/
   		}
   		
   		.product-pic img{
   			width:100%;
   			height: 100%;
   			border-radius:0.25rem;
   		}
   		
   		.product-right{
   			width:100%;
   			height:7em;
   			position: absolute;
   			padding-left:5.2rem;
   			-moz-box-sizing: border-box;  /*Firefox3.5+*/ 
 			-webkit-box-sizing: border-box; /*Safari3.2+*/ 
 			-o-box-sizing: border-box; /*Opera9.6*/
 			-ms-box-sizing: border-box; /*IE8*/ 
 			text-align:left;
 			line-height:1.2em;
 			color:rgb(153,153,153);
 			font-size:0.5rem;
   		}
   		.fuhao{
   		font-size: 0.6rem;
   		}
   		.product-right .name{
   			width:100%;
   			font-size:0.9rem;
   			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			/*display: -webkit-box;*/
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			height: 2.1em;
    		line-height: 1rem;
    		font-family: "PingFang";
  			color: rgb(51, 51, 51);
   		}
   		
   		.product-right .price{
   			width:100%;
   			height:1em;
   			/*bottom:-0.5em;*/
   			position: absolute;
   			-moz-box-sizing: border-box;  /*Firefox3.5+*/ 
 			-webkit-box-sizing: border-box; /*Safari3.2+*/ 
 			-o-box-sizing: border-box; /*Opera9.6*/
 			-ms-box-sizing: border-box; /*IE8*/ 
 			padding-right:5.5rem;
   		}
   		
   		.product-right .attribute{
   			margin: 0.5rem 0 0.5rem 0;
		    font-size: 0.8rem;
		    color: rgb(153,153,153);
		    width: 100%;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    line-height:1rem;
   		}
   		
   		.product-right .attribute .down{
   			display:none;
   		}
   		
   		.product-right .attribute.edit{
 			position: relative;
 			margin-top:3em;	
 			padding-right:8em;
 			-moz-box-sizing: border-box;  /*Firefox3.5+*/ 
 			-webkit-box-sizing: border-box; /*Safari3.2+*/ 
 			-o-box-sizing: border-box; /*Opera9.6*/
 			-ms-box-sizing: border-box; /*IE8*/ 
 		}
 		
   		.product-right .attribute.edit .down{
 			position: absolute;
 			top:0;
 			right:5.2em;	
 			display: block;
 		}
 		
 		.product-right .attribute.edit .down img{
 			width:1em;
 		}
   		
   		.product-right .price .money{
   			font-size:0.95rem;
   			float:left;
		    /* font-weight: 600; */
		    float: left;
		    color: rgb(193, 54, 56);
		    font-weight: bold;
		    font-family: "PingFang";
   		}
   		
   		.product-right .price .Market-money{
   			font-size:0.6rem;
   			color:grey;
   			text-decoration:line-through;
   			float:left;
   			margin-left:1em;
   		}
   		
   		.product-right .price .Number{
   			font-size:1em;
   			color:grey;
   			float:right;
   		}
   		.line{
   			width:105%;
   			position: relative;
   			overflow: hidden;
 		}
   		.line div{
   			 border-bottom: 1px solid rgba(230,230,230,.5);
   			 /*margin:1em 0 0.2em 0;*/
   			 width:100%;
 		}
 		
   		.line-row{
   			width:100%;
   			position: relative;
   			overflow: hidden;
 		}
   		.line-row div{
   			 border-bottom: 1px solid rgba(230,230,230,.5);
   			 width:100%;
 		}
 		
 		.item .delete-btn{
 			position: absolute;
 			height:8em;
 			background-color:red;
 			width:2em;	
 			top:0;right:0px;
 			padding-left:0.5em;
 			padding-right:0.5em;
 			padding-top:3.2em;
 			color:#FFFFFF;
 		}
 		.select-number{
 			padding-right:4em;
 			padding-top:1em;
 		}
 		.hide{display:none;}
 		.m-1{
 			width:25%;
 			float:left;
 		}
 		
 		.left{text-align:left;}
 		.right{text-align:right;}
 		.m-2{
 			width:50%;
 			float:left;
 			text-align:center;
 		}
 		.m-1.subtract{
 			margin-top:-0.2em;
 		}
 		.m-1 img{width:1em;}
 		.select-number .number{
 			padding-top:0em;
 		}
 		
 		.bottom{
 				height:3em;
 				background-color: #FFFFFF;
 				border-top: 1px solid #ddd;	
 				position:fixed;
 				bottom:0;
 				width:100%;
 			}
 			
 		.width-keep{
 			 -moz-box-sizing: border-box;  /*Firefox3.5+*/ 
 			-webkit-box-sizing: border-box; /*Safari3.2+*/ 
 			-o-box-sizing: border-box; /*Opera9.6*/
 			-ms-box-sizing: border-box; /*IE8*/ 
 		}
 		
 		.order-sum{
        		padding-bottom: 0;padding-top:0;
        	}
        .row{
        		width:100%;clear:both;padding-top:0.5em;padding-bottom:0.5em;float:left;
        	}
/*         .type_name{width:4rem} */
		._number{
			margin-right: 1rem;
		}
        .md-4{width:40%;float:left;color:#333;}
        .md-6{width:60%;float:left;position:relative;}
        input{height:1em;width:100%;display:block;border:0;outline:none;padding-top:0.5em;padding-bottom:0.5em;font-size:.9rem;}

        .right-arrow{position:absolute;right:0;top:0.1em;}	
        .right-arrow img{height:0.8em;}
        .freight{padding-right:0;}
        .line-row{border-bottom:1px solid rgba(230,230,230,.5);}
    </style>
</head>
<body>
   <div class="container" id="container">
   		<div class="page js_show home">
	    <div class="page preview js_show" id="content">
	    	<!-- 循环 -->
		        <div class="weui-form-preview" style="display:none">
		            <div class="weui-form-preview__bd">
		            	<div class="header">
		            		<div class="store-icon"><img src="<?php echo base_url('static/appui/imgs/store-icon.png');?>"/></div>
		            		<div class="store-name">
		            				<!-- 商户名称 -->
		            		</div>
		            		<div class="action-btn width-keep">
		            		
		            			到店消费
		            			
			            			<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>
			            	</div>
		            	</div>
		            	<!-- 商品循环 -->
		                <div class="item">
		            		<div class="product-pic">
		            		<!-- 商品图标 -->
		            			<img src="">
		            		</div>
		            		<div class="product-right">
		            			<div class="name">
			            				<!-- 商品名称 -->
		            			</div>
		            			<div class="attribute">
		            				规格：<!-- 规格 -->
		            			</div>
		            			<div class="price">
		            				<span class="money"><b>￥<!-- 价格 --></b></span>
		            				
		            				<span class="Market-money">￥<!-- 市场价 --></span>
		            				<span class="Number">x<!-- 购买数量 --></span>
		            			</div>
		            		</div>
		                </div>
		                <div class="line width-keep"><div></div></div>
		                <!--  -->
		            </div>
		        </div>
		       
		        <div class="weui-form-preview" style="display:none">
		            <div class="weui-form-preview__bd order-sum">
		                <div class="row">
		            		<div class="md-4 left">
		            			运费	
		            		</div>
		            		<div class="md-6 right width-keep freight">
		            			￥ <!-- 运费 -->
		            		</div>
		                </div>
		                <div class="line-row width-keep"><div></div></div>
	                	<div class="row">
		            		<div class="md-4 left">
		            			红包
		            		</div>
		            		<div class="md-6 right width-keep right-Arrow">
		            			<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>
		            		</div>
		            	</div>
		                <div class="line-row width-keep"><div></div></div>
		                <div class="row">
		            		<div class="md-4 left">
		            			代金卷
		            		</div>
		            		<div class="md-6 right width-keep">
		            			<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>
		            		</div>
		            	</div>
		                <div class="line-row width-keep"><div></div></div>
		                <div class="row left">
		            		<input placeholder="选填：给商家留言"/>
		            	</div>
		            	<div style="clear: both;"></div>
		            </div>
		        </div>
		        
		        <!--  -->
		</div>
	</div>
 </div>
 
 <!-- 
 	<div class="form-select" style="padding-top:0.7em;padding-left:15px;width:5em;">
       <img src="<?php echo base_url('static/appui/imgs/select.png');?>" style="width:1.3em;">
       <div style="display: inline-block;margin-left:0.2em;padding-top:0.4em;vertical-align: top;font-size:0.9em;">全选</div>
    </div>
     -->
     <!-- 
    <div style="position:absolute;top:0;padding-left:7em;width:100%;height:100%;" class="width-keep">
    	<div style="float:left;width:60%;padding-top:1.3em;text-align:right;padding-right:1em;font-size:0.9em;" class="width-keep">合计：<span style="color: #b94a48;">￥<?php echo $total;?></span></div>
    	<div style="float:left;height:100%;background-color: red;color: #FFFFFF;width:40%;text-align:center;font-size:1em;padding-top:1.1em;">去结算</div>
    </div>
     -->

 <script type="text/javascript">
	var changeObj = null;
	//通信对象
	 if( ! jsCxsm){
		 var jsCxsm = {
				 //预览订单
				 //type 1 消费类型 2 红包  3 代金券 4备注
				 showType:function(type,merchantId,remark){
					 showType(type,merchantId,remark)
				 },
		 }	
		 document.title = 'jsCxsm对象不存在，则说明你是ios'; 
	 }else{
		 document.title = 'jsCxsm对象存在，则说明你是android'; 
	 }

	 
	$(function(){

		$('input').focus(function(){
			$('.bottom').addClass('hide');
		});

		$('input').blur(function(){
			$('.bottom').removeClass('hide');
		});

		var order = eval('(<?php echo json_encode($order);?>)')
        console.log('订单参数:')
		console.log(order)
		
		var	html ='<div>'
		 	html += '<div class="weui-form-preview">'
			html += '<div class="weui-form-preview__bd">'
			html += '		<div class="header">'
			html += '			<div class="store-icon"><img src="<?php echo base_url('static/appui/imgs/store-icon.png');?>"/></div>'
			html += '			<div class="store-name">'
			html += '				<!-- 商户名称 -->'
    		html += '			</div>'
    		//html += '			<div class="action-btn width-keep _type1">'
    		//html += '				<span class="type_name">请选择消费模式</span>'
    		//html += '				<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
    		//html += '			</div>'
    		html += '		</div>'
    		html += '<!-- 商品循环 -->'
    		html += '<div id="item">'
			html += '</div>'
			html += '<!--  -->'
			html += '</div>'
			html += '</div>'
			html += ''
			html += '</div>'
		ohtml = $(html);	

			
		var	item = '<div>'
	    	item += '<div class="item">'
        	item += '	<div class="product-pic">'
        	item += '		<!-- 商品图标 -->'
        	item += '		<img src="" class="icon">'
        	item += '	</div>'
        	item += '	<div class="product-right">'
        	item += '		<div class="name">'
        	item += '			<!-- 商品名称 -->'
        	item += '		</div>'
    		item += '		<div class="attribute">'
    		item += '			规格：<!-- 规格 -->'
    		item += '		</div>'
    		item += '		<div class="price">'
    		item += '			<span class="money"><span class="fuhao">¥</span><b class="b_money"><!-- 价格 --></b></span>'
    		item += '				<span class="Market-money">￥<!-- 市场价 --></span>'
    		item += '					<span class="Number">x<!-- 购买数量 --></span>'
    		item += '		</div>'
    		item += '	</div>'
    		item += '</div>'
    		item += ' <div class="line width-keep"></div>'
    		item += '</div>'
        oitem = $(item);
            	
		var info ='<div>'
			info +='<div class="weui-form-preview">'
			info +='<div class="weui-form-preview__bd order-sum">'

            info +=' <div class="row _type6">'
            info +='<div class="md-4 left">'
            info +='送达时间'
            info +='</div>'
            info +='<div class="md-6 right width-keep">'
            info += '<span class="type_name _number"></span>'
            info +='	<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
            info +='</div>'
            info +='</div>'

			info +='<div class="row">'
			info +='<div class="md-4 left">'
			info +='	运费	'
			info +='</div>'
			info +='<div class="md-6 right width-keep freight _type7">'
			info +='	￥ <!-- 运费 -->'
			info +='</div>'
			info +='<div class="line-row width-keep"></div>'
			info +='</div>'

            info +='<div class="row">'
            info +='<div class="md-4 left">'
            info +='	打包费	'
            info +='</div>'
            info +='<div class="md-6 right width-keep lunch_box_fee">'
            info +='	<!-- 活动 -->'
            info +='</div>'
            info +='</div>'

				
			info +='<div class="row">'
			info +='<div class="md-4 left">'
			info +='	活动	'
			info +='</div>'
			info +='<div class="md-6 right width-keep full_cut">'
			info +='	<!-- 活动 -->'
			info +='</div>'
			info +='</div>'

			info +='<div class="line-row width-keep"></div>'
				
			info +='<div class="row _type2">'
			info +='<div class="md-4 left">'
			info +='红包'
			info +='</div>'
			info +='<div class="md-6 right width-keep right-Arrow">'
			info += '<span class="type_name _number"></span>'
			info +='	<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
			info +='</div>'
			info +='</div>'

            info +=' <div class="line-row width-keep"></div>'

            info +=' <div class="row">'
            info +='<div class="md-4 left">'
            info +='首单减免'
            info +='</div>'
            info +='<div class="md-6 right width-keep">'
            info += '<span class="first_order_reduce _number"></span>'
            info +='	<div class="right-arrow"></div>'
            info +='</div>'
            info +='</div>'

			info +=' <div class="line-row width-keep"></div>'
				
			info +=' <div class="row _type3">'
			info +='<div class="md-4 left">'
			info +='代金卷'
    		info +='</div>'
    		info +='<div class="md-6 right width-keep">'
    		info += '<span class="type_name _number"></span>'
    		info +='	<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
    		info +='</div>'
    		info +='</div>'

            info +=' <div class="row _type5">'
            info +='<div class="md-4 left">'
            info +='如遇缺货'
            info +='</div>'
            info +='<div class="md-6 right width-keep">'
            info += '<span class="type_name _number"></span>'
            info +='	<div class="right-arrow"><img src="<?php echo base_url('static/appui/imgs/right.png'); ?>"/></div>'
            info +='</div>'
            info +='</div>'

    		info +='<div class="line-row width-keep"></div>'
    		info +=' <div class="row left">'
    		info +='<input placeholder="选填：给商家留言" name="_type4"/>'
    		info +='</div>'
    		info +='<div class="line-row width-keep">'
//     		info +='<div style="clear: both;"></div>'
    		info +='</div>'
    		info +=''
    		info +='<div/>'
    	oinfo = $(info);
    	
			
		for(n in order){
			
			ohtml.find('.store-name').text(order[n].name)
			ohtml.find('#item').addClass('item'+n)
			ohtml.find('.weui-form-preview').attr('data-id',n);//设置商家id
			
			$("#content").append(ohtml.html());
			//商品列表
			var item = order[n].list;
			for(var i=0;i<item.length;i++){
				oitem.find('.name').text(item[i].name)
				oitem.find('.icon').attr('src',item[i].icon)
				oitem.find('.attribute').text(item[i].property)
				oitem.find('.b_money').text(item[i].price)
				oitem.find('.Market-money').text('¥'+item[i].market_price)
				oitem.find('.Number').text('x'+item[i].b_quantity)
				$(".item"+n).append(oitem.html());
			}
			
			//不支持红包
			if(order[n].is_bonus == 1){
				oinfo.find('._type2').hide()
				oinfo.find('._type2').next('.line-row').hide()
			}

			//不支持代金劵
			if(order[n].is_coupon == 1){
				oinfo.find('._type3').hide()
				oinfo.find('._type3').next('.line-row').hide()
			}
			
			oinfo.find('.weui-form-preview').attr('data-id',n).addClass("item-info");//设置商家id
			oinfo.find('.freight').text('¥'+order[n].shipping_fee).parents('.row') //默认 到店消费 隐藏运费
			oinfo.find('.full_cut').text(order[n].full_cut_str)
			oinfo.find('.lunch_box_fee').text('¥'+order[n].lunch_box_fee)
            oinfo.find('.first_order_reduce').text('¥'+order[n].first_order_reduce)

			$("#content").append(oinfo.html());
		}


		//更换类型
		$("._type1").on('click',function(){
			changeObj = $(this)
			var item = $(this).parents('.weui-form-preview')
			var merchantId = item.attr('data-id')
			//setType('{"text":"送货上门","type":"2"}')
 			jsCxsm.showType(1,merchantId,'')
		})
		
		//更换红包
		$("._type2").on('click',function(){
			changeObj = $(this)
			var item = $(this).parents('.weui-form-preview')
			var merchantId = item.attr('data-id')
			jsCxsm.showType(2,merchantId,'')
		})
		
		//更换代金劵
		$("._type3").on('click',function(){
			changeObj = $(this)
			var item = $(this).parents('.weui-form-preview')
			var merchantId = item.attr('data-id')
			jsCxsm.showType(3,merchantId,'')
		})

		//提交备注
		$('[name="_type4"]').change(function(){
			changeObj = $(this)
			var item = $(this).parents('.weui-form-preview')
			var merchantId = item.attr('data-id')
			var text = $(this).val()
			jsCxsm.showType(4,merchantId,text)
		})

        //更换如遇缺货
        $("._type5").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            jsCxsm.showType(5,merchantId,'')
        })

        //更换如遇缺货
        $("._type6").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            jsCxsm.showType(6,merchantId,'')
        })
        
        //查看运费详情
        $("._type7").on('click',function(){
            changeObj = $(this)
            var item = $(this).parents('.weui-form-preview')
            var merchantId = item.attr('data-id')
            jsCxsm.showType(7,merchantId,'')
        })
	});

	
	function setValue(data){
		//$('.weui-form-preview').before('您的参数:'+data);
		//'{"text":"送货上门"}','{"text":"-20"}'
		var data = JSON.parse(data)
		changeObj.find('.type_name').text(data.text)
	}

	function setType(data){
		//$('.weui-form-preview').before('您的参数:'+data);
		var data = JSON.parse(data)
		changeObj.find('.type_name').text(data.text)
		if (data.type == 1) {
			
			changeObj.parents(".preview").find('.freight').parents('.row').show() //跟换类型后显示运费
		}else if(data.type == 2){
			changeObj.parents(".preview").find('.freight').parents('.row').hide() //跟换类型后显示运费
		}
	}
	
	function setShippingFee(data){
		var data = JSON.parse(data).data
// 		var data = JSON.parse('{"status":1,"message":"","data":[{"merchant_id":"3","shipping_fee":"20"}]}').data
		var Div = $('.item-info');
		
		for (var n = 0; n < Div.length; n++){
			for (var i = 0; i < data.length; i++) {
				if (data[i].merchant_id == $(Div[n]).attr('data-id')) {
					$(Div[n]).find(".freight").text('¥'+data[i].shipping_fee);
				}
			}
		}
	}
	
	var param = {"3":{"bonus":"1","coupon":"2","type":"1"}}
	console.log(param)

 </script>
</body>
</html>
